<template>
   <div style="padding-bottom:10px" 
   :id="id" class="style-chart">
   </div>       
</template>
<script>
    // 引入 ECharts 主模块
    const echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/pie')
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    require('echarts/lib/component/legend')
    export default {
      name: 'barPercent',
      props: {
        echartInfor: {
          type: Object,
          default: function () { return { data: [] } }
        },
        className: {
          type: String,
          default: 'chart'
        },
        id: {
          type: String,
          default: 'chartpie'
        }
      },
      data () {
        return {
          loading: false
        }
      },
      // mounted () {
      //     this.initChart()
      // },
        watch: {
            'echartInfor':function(val){
              if(val.legend){
                    this.initChart()
              }
            }
        },
      methods: {
        initChart () {
          if(this.chart){
              this.chart.dispose();
          }
          this.chart = echarts.init(document.getElementById(this.id))
          let option = {
            title: {
              text: '',
                subtext: '',
                x:'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            color:this.echartInfor.colorList,
            legend: this.echartInfor.legend,
            series:[
              {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:this.echartInfor.dataShowList,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                }
              }
            ],// 数据展示
          }
          this.chart.setOption(option)
        }
      }
    }
</script>
<style lang="scss" scoped>
.style-chart{
  width: 100%;
  height: 400px;
}
</style>
